<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <blockquote class="text-warning" style="font-size: 14px">
          学习建议：坚持每日练习，多做项目实战，注重基础知识的掌握，遇到问题及时解决，保持良好的学习习惯。
        </blockquote>
        <hr />
      </el-col>
    </el-row>
    
    <!-- 本周考勤汇总 & 本周任务汇总 -->
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>本周考勤汇总 ({{ currentDate }})</span>
          </div>
          <div class="attendance-summary">
            <el-row>
              <el-col :span="8">
                <div class="summary-item">
                  <div class="summary-value success">42</div>
                  <div class="summary-label">出席</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="summary-item">
                  <el-popover
                    placement="top"
                    width="250"
                    trigger="hover">
                    <div>
                      <p v-for="(item, index) in lateUsers" :key="index" class="user-list-item">
                        <i class="el-icon-time"></i> {{ item.name }} - {{ item.date }}
                      </p>
                    </div>
                    <div slot="reference" class="summary-value warning">5</div>
                  </el-popover>
                  <div class="summary-label">迟到</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="summary-item">
                  <el-popover
                    placement="top"
                    width="250"
                    trigger="hover">
                    <div>
                      <p v-for="(item, index) in absentUsers" :key="index" class="user-list-item">
                        <i class="el-icon-close"></i> {{ item.name }} - {{ item.date }}
                      </p>
                    </div>
                    <div slot="reference" class="summary-value danger">3</div>
                  </el-popover>
                  <div class="summary-label">缺席</div>
                </div>
              </el-col>
            </el-row>
            <el-progress :percentage="84" :format="format" status="success"></el-progress>
          </div>
        </el-card>
      </el-col>
      
           <!-- 今日考勤班级汇总部分 -->
           <el-col :sm="24" :lg="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>今日考勤班级汇总({{ currentDate }})</span>
            <el-tag size="mini" style="margin-left: 10px;">Java45</el-tag>
          </div>
          <div class="class-attendance">
            <el-row>
              <el-col :span="8">
                <div class="summary-item">
                  <div class="summary-value success">12</div>
                  <div class="summary-label">出席</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="summary-item">
                  <el-popover
                    placement="top"
                    width="200"
                    trigger="hover">
                    <div>
                      <p v-for="(user, index) in todayLateUsers" :key="index" class="user-list-item">
                        <i class="el-icon-time"></i> {{ user }}
                      </p>
                    </div>
                    <div slot="reference" class="summary-value warning">2</div>
                  </el-popover>
                  <div class="summary-label">迟到</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="summary-item">
                  <el-popover
                    placement="top"
                    width="200"
                    trigger="hover">
                    <div>
                      <p v-for="(user, index) in todayLeaveUsers" :key="index" class="user-list-item">
                        <i class="el-icon-document"></i> {{ user }}
                      </p>
                    </div>
                    <div slot="reference" class="summary-value info">1</div>
                  </el-popover>
                  <div class="summary-label">请假</div>
                </div>
              </el-col>
            </el-row>
            <el-progress :percentage="80" :format="format" status="success"></el-progress>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">

       <!-- 本周任务汇总部分 -->
       <el-col :sm="24" :lg="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>本周任务汇总 </span>
          </div>
          <div class="task-summary">
            <el-table :data="weeklyTaskData" style="width: 100%" size="mini">
              <el-table-column prop="date" label="日期" width="100"></el-table-column>
              <el-table-column prop="status" label="完成状态" width="90">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.status === '未完成' ? 'danger' : 'success'">
                    {{ scope.row.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="grade" label="评分" width="80">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.grade === '不及格' ? 'warning' : 'success'">
                    {{ scope.row.grade }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="支持情况">
                <template slot-scope="scope">
                  <el-popover
                    placement="top"
                    width="200"
                    trigger="hover">
                    <div>
                      <p v-for="(user, index) in scope.row.supportUsers" :key="index" class="user-list-item">
                        <i :class="scope.row.status === '未完成' ? 'el-icon-bell' : 'el-icon-user'"></i> {{ user }}
                      </p>
                    </div>
                    <div slot="reference">
                      <span class="support-text">{{ scope.row.supportCount }}人{{ scope.row.status === '未完成' ? '打气' : '鼓励' }}</span>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
            </el-table>
            <el-progress :percentage="75" :format="format" status="warning" style="margin-top: 15px;"></el-progress>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>昨日任务班级汇总</span>
            <el-tag size="mini" style="margin-left: 10px;">Java45</el-tag>
          </div>
          <!-- 原有表格内容保持不变 -->
          <el-table :data="taskData" style="width: 100%" size="mini">
            <el-table-column prop="name" label="姓名" width="80"></el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status === '未完成' ? 'danger' : 'success'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="comment" label="操作">
              <template slot-scope="scope">
                <el-button 
                  v-if="scope.row.status === '未完成'" 
                  size="mini" 
                  type="warning"
                  icon="el-icon-bell"
                  :disabled="scope.row.hasActioned"
                  @click="handleTaskAction(scope.row, '打气')">
                  {{ scope.row.hasActioned ? '已打气' : '打气' }}
                </el-button>
                <el-button 
                  v-else 
                  size="mini" 
                  type="success"
                  icon="el-icon-star-on"
                  :disabled="scope.row.hasActioned"
                  @click="handleTaskAction(scope.row, '点赞')">
                  {{ scope.row.hasActioned ? '已点赞' : '点赞' }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 本周抽问 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :sm="24" :lg="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>本周抽问记录</span>
          </div>
          <el-table :data="questionData" style="width: 100%">
            <el-table-column prop="question" label="问题" show-overflow-tooltip></el-table-column>
            <el-table-column prop="askedPerson" label="抽问人" width="100"></el-table-column>
            <el-table-column prop="askingPerson" label="提问人" width="100"></el-table-column>
            <el-table-column prop="skillScore" label="技能分" width="295">
              <template slot-scope="scope">
                <el-rate
                  v-model="scope.row.skillScore"
                  disabled
                  :max="10"
                  :low-threshold="3"
                  :high-threshold="7"
                  text-color="#ff9900">
                </el-rate>
                <span style="font-size: 12px; color: #606266; margin-left: 5px;">{{ scope.row.skillScore }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="communicationScore" label="沟通分" width="220">
              <template slot-scope="scope">
                <el-rate
                  v-model="scope.row.communicationScore"
                  disabled
                  :max="7"
                  :low-threshold="2"
                  :high-threshold="5"
                  text-color="#ff9900">
                </el-rate>
                <span style="font-size: 12px; color: #606266; margin-left: 5px;">{{ scope.row.communicationScore }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.6.5",
      // 本周任务按日期汇总数据
      weeklyTaskData: [
        {
          date: "2024-08-25",
          status: "未完成",
          grade: "不及格",
          supportCount: 12,
          supportUsers: [
            "刘一 - Java45",
            "陈二 - Java46",
            "张三 - Java45",
            "李四 - Java46",
            "王五 - Java45",
            "赵六 - Java46",
            "钱七 - Java45",
            "孙八 - Java46",
            "周九 - Java45",
            "吴十 - Java46",
            "郑十一 - Java45",
            "王十二 - Java46"
          ]
        },
        {
          date: "2024-08-26",
          status: "已完成",
          grade: "及格",
          supportCount: 12,
          supportUsers: [
            "张三 - Java45",
            "李四 - Java45",
            "王五 - Java46",
            "赵六 - Java46",
            "钱七 - Java45",
            "孙八 - Java46",
            "周九 - Java45",
            "吴十 - Java46",
            "郑十一 - Java45",
            "王十二 - Java46",
            "冯十三 - Java45",
            "陈十四 - Java46"
          ]
        }
      ],
      // 昨日任务班级汇总数据
      taskData: [
        {
          name: "张三",
          status: "未完成",
          comment: "打气，继续努力！",
          hasActioned: false
        },
        {
          name: "李四",
          status: "完成",
          comment: "做得很好，继续保持！",
          hasActioned: false
        },
        {
          name: "王五",
          status: "完成",
          comment: "思路清晰，代码规范！",
          hasActioned: false
        },
        {
          name: "赵六",
          status: "未完成",
          comment: "需要加强练习！",
          hasActioned: false
        }
      ],
      // 本周抽问数据
      questionData: [
        {
          question: "Spring Boot 自动配置原理是什么？",
          askedPerson: "张三",
          askingPerson: "王老师",
          skillScore: 8,
          communicationScore: 5.5
        },
        {
          question: "简述 JVM 内存模型",
          askedPerson: "李四",
          askingPerson: "李老师",
          skillScore: 6,
          communicationScore: 4
        },
        {
          question: "什么是 RESTful API？",
          askedPerson: "王五",
          askingPerson: "赵老师",
          skillScore: 9,
          communicationScore: 6
        },
        {
          question: "解释 Java 中的多态",
          askedPerson: "赵六",
          askingPerson: "钱老师",
          skillScore: 7,
          communicationScore: 5
        }
      ],
      // 鼓励用户列表
      encourageUsers: [
        "张三 - Java45",
        "李四 - Java45",
        "王五 - Java46",
        "赵六 - Java46",
        "钱七 - Java45",
        "孙八 - Java46",
        "周九 - Java45",
        "吴十 - Java46",
        "郑十一 - Java45",
        "王十二 - Java46",
        "冯十三 - Java45",
        "陈十四 - Java46"
      ],
      // 打气用户列表
      cheerUsers: [
        "刘一 - Java45",
        "陈二 - Java46",
        "张三 - Java45",
        "李四 - Java46",
        "王五 - Java45",
        "赵六 - Java46"
      ],
      // 迟到用户列表
      lateUsers: [
        { name: "张三 - Java45", date: "2025-03-25" },
        { name: "李四 - Java46", date: "2025-03-26" },
        { name: "王五 - Java45", date: "2025-03-27" },
        { name: "赵六 - Java46", date: "2025-03-27" },
        { name: "钱七 - Java45", date: "2025-03-28" }
      ],
      // 缺席用户列表
      absentUsers: [
        { name: "孙八 - Java46", date: "2025-03-25" },
        { name: "周九 - Java45", date: "2025-03-26" },
        { name: "吴十 - Java46", date: "2025-03-28" }
      ],
      // 今日迟到用户列表
      todayLateUsers: [
        "张三 - Java45",
        "李四 - Java45"
      ],
      // 今日请假用户列表
      todayLeaveUsers: [
        "王五 - Java45"
      ]
    };
  },
  computed: {
    currentDate() {
      const date = new Date();
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    format(percentage) {
      return percentage + '%';
    },
    // 处理任务操作
    handleTaskAction(row, action) {
      let message = '';
      if (action === '打气') {
        message = `已对 ${row.name} 进行打气鼓励！`;
      } else if (action === '点赞') {
        message = `已对 ${row.name} 的任务完成情况点赞！`;
      }
      
      // 更新操作状态
      row.hasActioned = true;
      
      this.$message({
        message: message,
        type: 'success'
      });
    }
  },
};
</script>

<style scoped lang="scss">
.home {
  // 保持原有样式不变
  
  .support-text {
    color: #409EFF;
    font-weight: bold;
    cursor: pointer;
  }
  
  .user-list-item {
    margin: 5px 0;
    font-size: 12px;
  }
  
  // 其他原有样式保持不变
}
</style>
